  <!-- 
       需求分析
          1 顶部导航 
          2 点击... 出现菜单: 首页、购物车、分享
          3 点击分享，底部弹出分享面版
          4 显示图片轮播图
          5 点击商品查看图片预览
          6 点击视频播放按钮，播放视频
          7 商品价格
          8 商品名称
          9 加入购物车
    -->


<template>
    <div class="detail">
        <!-- 顶部导航 -->
        <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="$router.back()">
            <template #right>
                <van-popover v-model:show="showPopover" :actions="actions" placement="bottom-end"
                    @select="selectHandler">
                    <template #reference>
                        <van-icon name="ellipsis" size="30" />
                    </template>
                </van-popover>

            </template>
        </van-nav-bar>
        <!-- 商品详情 -->
        <div class="content">
            <div class="banner">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item, index) of detailObj.swipeArr" :key="index"
                        @click="swipeItemClick(index)">
                        <img :src="item" alt="">
                    </van-swipe-item>
                </van-swipe>
                <div class="btn-play" @click="playHandler">
                    <van-icon name="play-circle"></van-icon>
                    <span class="time"> 00'55''</span>
                </div>
            </div>
            <h3 class="price">
                ¥ <span class="price-value">{{ detailObj.price }}</span>
            </h3>
            <h3 class="detail-name">
                <van-tag type='danger'>自营</van-tag>
                <span class="name">{{ detailObj.proname }}</span>
            </h3>
        </div>
    </div>
    <!-- 加入购物车按钮和立即购买 -->
    <van-action-bar>
        <van-action-bar-icon icon="cart-o" text="购物车" @click="$router.push('/cart')" />
        <van-action-bar-button type="warning" v-if='issale' text="加入购物车" @click="addHandler" />
        <van-action-bar-button type="danger" v-if='issale' text="立即购买" />
        <van-action-bar-button type="danger" v-else text="已下架" />
    </van-action-bar>

    <!-- 分享面板 -->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    <!-- 视频弹出层 -->
    <van-popup v-model:show="show" @close="closeHandler">
        <video
            src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
            preload="preload" controls width="150" ref="video"></video>
    </van-popup>
</template>
<script setup lang="ts">




import { useDetail, useDetailVideo, useDetailCart } from '@/hooks/useDetail'


import { showImagePreview } from 'vant';

const { onClickLeft,
    showPopover,
    onSelect,
    options,
    actions,
    showShare,
    detailObj,
    selectHandler
} = useDetail()



//视频播放 逻辑 

const {
    show,
    video,
    playHandler,
    closeHandler } = useDetailVideo()




// 加入购物车逻辑
const { issale, addHandler } = useDetailCart()






const swipeItemClick = (index: number) => {
    // showImagePreview(detailObj.swipeArr);
    // console.log(detailObj.swipeArr)
    // const { swipeArr } = detailObj
    // let arr = ["https://img.alicdn.com/imgextra/i1/1714128138/O1CN01VUJK3f29zForLahYc_!!0-item_pic.jpg_430x430q90.jpg",


    //     "https://img.alicdn.com/imgextra/i2/1714128138/O1CN01jr6J1V29zFoV1LbUu_!!0-item_pic.jpg_430x430q90.jpg",


    //     "https://img.alicdn.com/imgextra/i3/1714128138/O1CN01KaVzhz29zFoBI7cxY_!!1714128138.jpg_430x430q90.jpg",


    //     "https://img.alicdn.com/imgextra/i1/1714128138/O1CN01WF3zMy29zFoJENfk4_!!1714128138.jpg_430x430q90.jpg"]

    // console.log('%c@@@swipeArr===>', 'color:green;font-size:15px', swipeArr)

    // showImagePreview([
    //     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    //     'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    // ]);
}

















</script>


<style scoped lang="scss">
.detail {
    .content {
        height: calc(100vh - 100px);
        overflow: auto;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .van-swipe-item {
        img {
            width: 100%;
        }
    }

    .banner {
        position: relative;

        .btn-play {
            background: #fff;
            position: absolute;
            left: 50%;
            bottom: 5%;
            transform: translate(-50%, -50%);
            font-weight: bold;
            font-size: 30px;
            text-align: left;
            box-sizing: border-box;
            padding: 0 8px 0 2px;
            width: 85px;
            height: 32px;
            border-radius: 16px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            opacity: 0.95;

            .van-icon {
                color: #ee0a24;
                margin: 2px;
            }

            .time {
                font-size: 12px;
                color: #262626;
                line-height: 30px;
            }
        }

        video {
            width: 100%;
        }
    }

    .price {
        text-align: left;
        font-weight: bold;
        font-size: 15px;
        color: #ee0a24;
        padding-left: 15px;
        margin: 5px;

        .price-value {
            font-size: 20px;
        }
    }

    .detail-name {
        text-align: left;
        padding: 0 15px;
        margin: 5px;

        .van-tag {
            margin-right: 3%;
            transform: translateY(-20%);
        }
    }
}
</style>